<template>
	<view class="detail-ap">
		<view class="main">
			<view class="mian-title">
				<view class="xq_title">
					车辆信息
				</view>
			</view>
			<view class="forms">
				<view class="Category_title">
					<view class="line"></view>运输车辆信息
				</view>
				<view class="items">
					<view class="field">
						车牌号
					</view>
					<view class="content">
						{{detailmsg.plateNumber || '暂无' }}
					</view>
				</view>
				<view class="items">
					<view class="field">
						定位系统型号
					</view>
					<view class="content">
						{{detailmsg.gpsSystem || '暂无' }}
					</view>
				</view>
				<view class="items">
					<view class="field">
						车载视频型号
					</view>
					<view class="content">
						{{detailmsg.vehicleVideo || '暂无' }}
					</view>
				</view>
				<view class="items">
					<view class="field" style="width: 350rpx;" >
						挂靠协议(图片)
						<view class="showpdf">
							<img class="pho" :src="detailmsg.ossAffiliated" alt="">
						</view>
					</view>
				</view>
				<view class="items">
					<view class="field" style="width: 350rpx;" >
						车辆营运证(图片)
						<view class="showpdf">
							<img class="pho" :src="detailmsg.ossBlImg" alt="">
						</view>
					</view>
				</view>
				<view class="items">
					<view class="field" style="width: 350rpx;" >
						车辆照片(图片)
						<view class="showpdf">
							<img class="pho" :src="detailmsg.ossCarImg" alt="">
						</view>
					</view>
				</view>
				<view class="items">
					<view class="field" style="width: 350rpx;" >
						行驶证(图片)
						<view class="showpdf">
							<img class="pho" :src="detailmsg.ossTravelLicense" alt="">
						</view>
					</view>
				</view>
				<view class="items">
					<view class="field">
						行驶证有效起始时间
					</view>
					<view class="content"   >
						{{detailmsg.travelLicenseTimeStart || '暂无' }}
					</view>
				</view>
				<view class="items">
					<view class="field">
						行驶证有效结束时间
					</view>
					<view class="content"  >
						{{detailmsg.travelLicenseTimeEnd || '暂无' }}
					</view>
				</view>
				<view class="items">
					<view class="field">
						车辆营运证有效起始时间
					</view>
					<view class="content"   >
						{{detailmsg.blTimeStart || '暂无' }}
					</view>
				</view>
				<view class="items">
					<view class="field"  >
						车辆营运证有效截止时间
					</view>
					<view class="content"  >
						{{detailmsg.blTimeEnd || '暂无' }}
					</view>
				</view>
				<view class="Category_title">
					<view class="line"></view>驾驶员信息
				</view>
				
				<view class="items">
					<view class="field">
						驾驶员姓名
					</view>
					<view class="content"   >
						{{detailmsg.name || '暂无' }}
					</view>
				</view>
				<view class="items">
					<view class="field">
						手机号
					</view>
					<view class="content"   >
						{{detailmsg.contact || '暂无' }}
					</view>
				</view>
				<view class="items">
					<view class="field">
						身份证号
					</view>
					<view class="content"   >
						{{detailmsg.identityCard || '暂无' }}
					</view>
				</view>
				<view class="items">
					<view class="field">
						身份证照片
						<view class="showpdf">
							<img class="pho" :src="detailmsg.zhatuDriverInfoRequestQueries[0].ossShfz" alt="">
						</view>
					</view>
				</view>
				<view class="items">
					<view class="field">
						从业资格证
						<view class="showpdf">
							<img class="pho" :src="detailmsg.zhatuDriverInfoRequestQueries[0].certificateCy" alt="">
						</view>
					</view>
				</view>
				<view class="items">
					<view class="field">
						暂住证(图片)
						<view class="showpdf">
							<img class="pho" :src="detailmsg.zhatuDriverInfoRequestQueries[0].temporaryResidencePermit" alt="">
						</view>
					</view>
				</view>
				<view class="items">
					<view class="field">
						从业资格证起始时间
					</view>
					<view class="content"   >
						{{detailmsg.zhatuDriverInfoRequestQueries[0].certificateStart || '暂无' }}
					</view>
				</view>
				<view class="items">
					<view class="field"  >
						从业资格证结束时间
					</view>
					<view class="content"  >
						{{detailmsg.zhatuDriverInfoRequestQueries[0].certificateEnd || '暂无' }}
					</view>
				</view>
				<view class="items">
					<view class="field">
						驾驶证开始时间
					</view>
					<view class="content"   >
						{{detailmsg.zhatuDriverInfoRequestQueries[0].driverLicenseTimeStart || '暂无' }}
					</view>
				</view>
				<view class="items">
					<view class="field"  >
						驾驶证结束时间
					</view>
					<view class="content"  >
						{{detailmsg.zhatuDriverInfoRequestQueries[0].driverLicenseTimeEnd || '暂无' }}
					</view>
				</view>
				<view class="items">
					<view class="field">
						暂住证起始时间
					</view>
					<view class="content"   >
						{{detailmsg.zhatuDriverInfoRequestQueries[0].temporaryResidencePermitStart || '暂无' }}
					</view>
				</view>
				<view class="items">
					<view class="field"  >
						暂住证结束时间
					</view>
					<view class="content"  >
						{{detailmsg.zhatuDriverInfoRequestQueries[0].temporaryResidencePermitEnd || '暂无' }}
					</view>
				</view>
				
				
			</view>
		</view>
		<u-popup v-model="show" mode="bottom " :border-radius="border_radius" mask>
			<view class="pop">
				<view class="title">
					<view class="" @click="show=false">
						取消
					</view>
					<view class="">
						{{buttontype==1 ? '核验':buttontype==2?'处置' : buttontype==3 ? '审核' : buttontype==4 ? '转派': buttontype==10 ?'分派':'分派中'  }}
					</view>
					<view class="" style="color: #007AFF;" @click="comfirm">
						确认
					</view>
				</view>
				<view class="pop_title">
					审核意见
				</view>
				<view class="" style="margin:50rpx 20rpx 50rpx 20rpx ">
					<u-input style="" v-model="type_value" :type="type" :border="border" :height="height"
						placeholder="请填写审核意见" />
				</view>
			</view>
		</u-popup>
		<u-popup v-model="showpart" mode="bottom " :border-radius="border_radius" mask>
			<view class="pop">
				<view class="title">
					<view class="" @click="showpart=false">
						取消
					</view>
					<!-- <view class="">
						{{buttontype==10 ? '请选择参与部门' :'分派处置' }}
					</view> -->
					<view class="" style="color: #007AFF;" @click="comfirm_part">
						确认
					</view>
				</view>
				<view class="checkbox-group" v-if="buttontype==10">
					<u-checkbox-group @change="checkboxGroupChange">
						<u-checkbox @change="checkboxChange" v-model="item.checked" v-for="(item, index) in list"
							shape="circle" size="45rpx" :key="index" :name="item.orgId">{{item.orgName}}</u-checkbox>
					</u-checkbox-group>
				</view>
				<view class="" style="margin:50rpx 20rpx 50rpx 20rpx " v-else>
					<u-input style="" v-model="type_value" :type="type" :border="border" :height="height"
						placeholder="请填写审核意见" />
				</view>

			</view>
		</u-popup>
		
		<u-toast ref="uToast" />
		<view class="footer">
			<view class="" v-show="!flag">
				<!-- <button class="taketask" v-if="orderType == 0" type="default" @click="taketask">任务认领</button> -->
				<view class="footer">
					<!-- 1.是否通过 -->
					<view class="footer" v-if="buttontype==1">
						<button class="cancel" type="default" @click="passout">关闭工单</button>
						<button class="confim" type="default" @click="passin">通过</button>
					</view>
					<view class="footer" v-else-if="buttontype==2">
						<button class="cancel" type="default" @click="passout">关闭工单</button>
						<button class="confim" type="default" @click="show=true">处置</button>
					</view>
					<view class="footer" v-else-if="buttontype==3">
						<button class="cancel" type="default" @click="passout">关闭工单</button>
						<button class="confim" type="default" @click="show=true">通过</button>
					</view>
					<view class="footer" v-else-if="buttontype==6">
						<button class="taketask" type="default" @click="showpart=true">关闭工单</button>
					</view>
					<view class="footer" v-else-if="buttontype==10">
						<button class="cancel" type="default" @click="passout">关闭工单</button>
						<button class="confim" type="default" @click="showpart=true">分派部门</button>
					</view>
					<view class="footer" v-else-if="buttontype==11">
						<button class="cancel" type="default" @click="passout">关闭工单</button>
						<button class="confim" type="default" @click="comfirm_part">通过</button>
					</view>
					<!-- 2.审核意见 -->
					<!-- <button class="taketask" type="default" @click="show=true">
						{{buttontype==1 ? '核验':buttontype==2?'处置' : buttontype==3 ? '审核' : buttontype==4 ? '转派': buttontype==10 ?'分派':'分派中'  }}
					</button> -->
				</view>
			</view>
		</view>
		
		<view class="">
			<u-calendar v-model="showcalendar" :mode="mode" @change='setTime'  ></u-calendar>
		</view>
		
	</view>
</template>

<script>
	import {
		getOrderDetail,
		getWorkOrderLogs,
		getTakeTask,
		postOrderHandle,
		orgByNodeId,
		allocate,
		allocatedo,
		getPdf,
		detailById,
		postWithdraw,
		postOrderAudit,
		getTransferDepartment,
		getNextPersons,
		postOrderDispatch,
		postCheck,
		getMyList
	} from '@/pages/api/orderp/orderp.js'
	import {
		getByOrdersId
	} from '@/pages/api/report/orderp.js'
	import {
		uploadUrl
	} from '@/pages/api/report/helperOrderp.js'
	import methodMix from '@/pages/index/approval/chutu/methodMix_chutu.js'
	export default {
		mixins: [methodMix],
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				id: '',
				detailList: {},
				timeLeft: '',
				formarr: [],
				getphotolist: [],
				chuzhiphotolist: [],
				circulList: [],
				types: ['新建', '核验', '处置', '审核', '转派', '上提', '关闭工单', '关闭'],
				orderColor: ["#418AEC", "#00B853", "#FF9F00", "#F55545", "#00D0CE", "#418AEC", "#8941EC"],
				chuzhiarr: [],
				show: false,
				showpart: false,
				showmap:false,
				closeable: false,
				type: 'textarea',
				autoup: false,
				border: true,
				height: 240,
				type_value: '',
				border_radius: '30rpx',
				orderType: '',
				nodeId: '',
				list: [{
					nodeId: "19ca0a224aad5d408dd8ea23d1c813c0",
					orgId: "GO_df2f46315d414518a31bea909fbd67a6",
					orgName: '建设局',
					checked: true,
					disabled: false
				},
				{
					nodeId: "19ca0a224aad5d408dd8ea23d1c813c0",
					orgId: "GO_df2f46315d414518a31bea909fbd67a6",
					orgName: '水利局',
					checked: false,
					disabled: false
				},
				{
					nodeId: "19ca0a224aad5d408dd8ea23d1c813c0",
					orgId: "GO_df2f46315d414518a31bea909fbd67a6",
					orgName: '交通局',
					checked: false,
					disabled: false
				},
				{
					nodeId: "19ca0a224aad5d408dd8ea23d1c813c0",
					orgId: "GO_df2f46315d414518a31bea909fbd67a6",
					orgName: '农业农村局',
					checked: false,
					disabled: false
				},
				{
					nodeId: "19ca0a224aad5d408dd8ea23d1c813c0",
					orgId: "GO_df2f46315d414518a31bea909fbd67a6",
					orgName: '高新区建设局',
					checked: false,
					disabled: false
				}],
				activelist: [],
				flag: false,
				idd: '',
				buttontype: 0,
				list_1: [{
						name: '是',
						disabled: false
					},
					{
						name: '否',
						disabled: false
					}
				],
				outorder: 0,
				detailmsg: {
					
				},
				checkop: '',
				action: 'http://172.21.188.5:8085/zhatu/file/upload',
				form:{
					chukou:[],
					chongxi:[],
					fangchen:[],
					dibang:[],
					shipin:[],
					qita:[]
				},
				date: currentDate,
				date1: currentDate,
				showendTime: false,
				showstartTime: false,
				time: '2021-08-01',
				time1: '2021-08-01',
				showcalendar: false,
				mode: 'range'
			}
		},
		onLoad(data) {
			const eventChannel = this.getOpenerEventChannel()
			// 监听getData事件，获取上一页面通过eventChannel传送到当前页面的数据
			eventChannel.on('getData', data => {
					console.log(data)
					this.detailmsg = data
					
			})	
		},
		mounted() {
			uni.showLoading({
				title: '加载中'
			});
			setTimeout(function() {
				uni.hideLoading();
			}, 200);

			// this.getolddetail()
		},
		methods: {
			getolddetail() {
				return new Promise((resolve, reject) => {
					getByOrdersId({
						ordersId: this.idd
					}).then(res => {
						console.log('车辆详情信息',res)
						this.detailmsg = res
						resolve(res)
					}).catch(err => {
						reject(err)
					})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.detail-ap {
		height: 100vh;
		width: 750rpx;
		display: flex;
		flex-direction: column;

		.main {
			flex: 1;
			width: 750rpx;
			background-color: #F2F3F5;
			overflow-x: hidden;

			.mian-title {
				padding: 32rpx;
				height: 66rpx;
				background-color: #FFFFFF;

				.xq_title {
					font-weight: 600;
					font-size: 40rpx;
					color: #363A44;
					margin-bottom: 24rpx;
				}

				.xq_type {
					font-size: 28rpx;
					color: #B5B7BA;
				}
			}

			.forms {
				// margin-top: 22rpx;
				padding: 26rpx 32rpx 26rpx 0rpx;
				width: 750rpx;
				background-color: #FFFFFF;
				border-radius: 10rpx;

				.Category_title {
					display: flex;
					font-weight: 600;
					font-size: 32rpx;
					color: #428FFC;
					height: 92rpx;
					background-color: #F6F7F8;
					line-height: 100rpx;
					padding-left: 32rpx;

					.line {
						height: 32rpx;
						margin: 32rpx 16rpx 0 0;
						width: 4rpx;
						background-color: #428FFC;
					}
				}

				.items {
					display: flex;
					padding: 26rpx 0 26rpx 0;
					font-size: 32rpx;
					margin-left: 32rpx;
					margin-right: 32rpx;
					border-bottom: 2rpx solid #E8E9EC;

					.field {
						width: 242rpx;
						color: #B3B5B9;
						margin-right: 32rpx;

						.showpdf {
							margin-top: 16rpx;
							height: 200rpx;
							width: 200rpx;
							border: 1rpx solid #E8E9EC;
							border-radius: 10rpx;
							display: flex;
							justify-content: center;
							align-items: center;

							.pho {
								height: 200rpx;
								width: 200rpx;
							}

							.pdf {

								height: 128rpx;
								width: 104rpx;
							}
						}
					}

					.content {
						width: 440rpx;
						color: #B3B5B9;
						// color: #363A44;
					}
				}

				.line {
					height: 5rpx;
					background-color: #F2F3F5;
				}
			}

			.circul {
				display: flex;
				margin-left: 22rpx;
				margin-bottom: 40rpx;
				width: 750rpx;

				.type {
					margin-top: 22rpx;
					height: 50rpx;
					width: 50rpx;
					background-color: #2979FF;
					color: #FFFFFF;
					font-size: 31rpx;
					border-radius: 50%;
					text-align: center;
					line-height: 50rpx;
				}

				.circul_content {
					padding: 22rpx;
					margin-left: 22rpx;
					background-color: #FFFFFF;
					width: 588rpx;
					border-radius: 10rpx;

					.circul_field {
						margin-top: 22rpx;
					}
				}
			}
		}

		.footer {
			display: flex;
			justify-content: center;

			width: 750rpx;
			height: 128rpx;
			background-color: #FFFFFF;
			font-size: 29rpx;
			box-shadow: 2rpx 0 6rpx rgba(0, 0, 0, .12), 0 0 6rpx rgba(0, 0, 0, .04);

			.cancel {
				height: 87rpx;
				width: 339rpx;
				border: 1rpx solid #428FFC;
				border-radius: 50rpx;
				color: #428FFC;
				margin-top: 14rpx;
				// margin-left: 32rpx;
			}

			.confim {
				height: 87rpx;
				width: 339rpx;
				border: 1rpx solid #428FFC;
				border-radius: 50rpx;
				background-color: #428FFC;
				color: #FFFFFF;
				margin-top: 14rpx;
				margin-left: 16rpx;
			}

			.taketask {
				height: 87rpx;
				width: 692rpx;
				line-height: 87rpx;
				border: 1rpx solid #428FFC;
				border-radius: 50rpx;
				background-color: #428FFC;
				color: #FFFFFF;
				margin-top: 14rpx;
			}
		}
	}

	.pop {
		height: 750rpx;
		border-radius: 20rpx;

		.pop_title {
			color: #363A44;
			font-size: 32rpx;
			padding: 40rpx 0 32rpx 32rpx;
			border-bottom: 1rpx solid #EFEFEF;
		}

		.title {
			padding: 20rpx;
			display: flex;
			justify-content: space-between;
		}

		.checkbox-group {
			padding: 20rpx;
		}
	}
	#navi_map{
		height: 550rpx;
	}
	.map_box{
		height: 550rpx;
	}
	img {
		height: 116rpx;
		width: 116rpx;
		margin-right: 20rpx;
	}
</style>
